<ng-container [ngSwitch]="type" *ngIf="edit">
    <ng-container *ngSwitchCase="'number'">
        <input nz-input type="number" [(ngModel)]="editableValue" (change)="valueChanged()" (keydown)="sendValueChanged()"
            name="value">
    </ng-container>
    <ng-container *ngSwitchCase="'text'">
        <codemirror [(ngModel)]="editableValue" [config]="codeMirrorConfig" (change)="changeCodeMirror()" #codeMirror
            (keydown)="sendValueChanged()"></codemirror>
    </ng-container>
    <ng-container *ngSwitchCase="'boolean'">
        <label nz-checkbox [(ngModel)]="editableValue" (ngModelChange)="valueChanged();sendValueChanged()" name="value"></label>
    </ng-container>
    <ng-container *ngSwitchCase="'ssh-key'">
        <ng-container *ngIf="keys && keys.ssh && (!editableValue || keyExist(editableValue.toString()))">
            <nz-select nzShowSearch name="sshname" [(ngModel)]="editableValue"  (ngModelChange)="valueChanged();sendValueChanged()" >
                <nz-option *ngFor="let t of keys.ssh" [nzLabel]="t.name" [nzValue]="t.name"></nz-option>
            </nz-select>
        </ng-container>
        <ng-container *ngIf="!keys || (editableValue && keys && keys.ssh && !keyExist(editableValue.toString()))">
            <input nz-input type="text" [(ngModel)]="editableValue" (change)="valueChanged()" (keydown)="sendValueChanged()"
                name="value">
        </ng-container>
    </ng-container>
    <ng-container *ngSwitchCase="'pgp-key'">
        <ng-container *ngIf="keys">
            <nz-select nzShowSearch name="gpgname" [(ngModel)]="editableValue"  (ngModelChange)="valueChanged();sendValueChanged()">
                <nz-option *ngFor="let t of keys.pgp" [nzLabel]="t.name" [nzValue]="t.name"></nz-option>
            </nz-select>
        </ng-container>
    </ng-container>
    <ng-container *ngSwitchCase="'list'">
        <ng-container *ngIf="editList">
            <input nz-input type="text" [(ngModel)]="editableValue" (change)="valueChanged()" (keydown)="sendValueChanged()"
                name="value" placeholder="value1;value2;value3">
        </ng-container>
        <ng-container *ngIf="!editList && editableValue && list">
            <nz-select nzShowSearch name="listvalue" [(ngModel)]="editableValue" (ngModelChange)="valueChanged();sendValueChanged()">
                <ng-container *ngIf="refValue">
                    <nz-option *ngFor="let v of refValue" [nzValue]="v" [nzLabel]="v"></nz-option>
                </ng-container>
                <ng-container *ngIf="!refValue">
                    <nz-option *ngFor="let v of list" [nzValue]="v" [nzLabel]="v"></nz-option>
                </ng-container>
            </nz-select>
        </ng-container>
    </ng-container>
    <ng-container *ngSwitchCase="'repository'">
        <nz-select nzShowSearch [(ngModel)]="selectedRepoManager.name" (ngModelChange)="updateRepoManager($event)">
            <nz-option *ngFor="let r of repositoriesManager" [nzValue]="r.name" [nzLabel]="r.name"></nz-option>
        </nz-select>
        <nz-select *ngIf="selectedRepoManager && selectedRepoManager.name !== 'Git Url'" [(ngModel)]="selectedRepo"
                   [disabled]="loadingRepos"
                   (ngModelChange)="valueRepoChanged($event)">
            <nz-option *ngFor="let r of repositories" [nzLabel]="r.fullname" [nzValue]="r.fullname"></nz-option>
        </nz-select>
        <input nz-input *ngIf="selectedRepoManager && selectedRepoManager.name === 'Git Url'" type="text"
            [(ngModel)]="editableValue" (change)="valueChanged()" (keydown)="sendValueChanged()" name="value"
            placeholder="{{'parameter_git_url' | translate }}">
    </ng-container>
    <div *ngSwitchDefault>
        <input nz-input [nzAutocomplete]="auto" type="text" [(ngModel)]="editableValue" (change)="valueChanged()"
            (keydown)="sendValueChanged()" name="value" (ngModelChange)="onInput($event)">
        <nz-autocomplete nzBackfill #auto>
            <nz-auto-option *ngFor="let option of suggestFiltered" [nzValue]="option">{{ option }}</nz-auto-option>
        </nz-autocomplete>
    </div>
</ng-container>
<ng-container [ngSwitch]="type" *ngIf="!edit">
    <ng-container *ngSwitchCase="'text'">
        <textarea nz-input readonly rows="{{_sharedService.getTextAreaheight(editableValue.toString())}}">{{editableValue}}</textarea>
    </ng-container>
    <ng-container *ngSwitchCase="'boolean'">
        <label nz-checkbox [(ngModel)]="editableValue" name="value" [nzDisabled]="true"></label>
    </ng-container>
    <ng-container *ngSwitchDefault>
        <input nz-input readonly [ngModel]="editableValue">
    </ng-container>
</ng-container>
